<template>
  <div class="manage-member">
    <div class="container">
      <div class="member-info-title text-overflow">管理所有的下级会员</div>
      <!-- 查询方式 -->
      <div class="filter-box">
        <!-- 手机号查询 -->
        <div class="filter-by-phone">
          <span class="text-overflow">手机号：</span>
          <el-input
            class="filter-input"
            clearable
            v-model="filters.phone"
            @keyup.native.enter="queryByStatus(0)"
            placeholder="手机号码查询"
          ></el-input>
        </div>
        <!-- 状态查询 -->
        <div class="filter-by-status">
          <div class="realname-status">
            <el-select
              class="filter-select"
              @change="queryByStatus(0)"
              v-model="filters.realnameStatus"
              clearable
              placeholder="实名审核状态"
            >
              <el-option
                v-for="item in realname_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="shop-status">
            <el-select
              class="filter-select"
              @change="queryByStatus(0)"
              v-model="filters.usershopStatus"
              clearable
              placeholder="商户审核状态"
            >
              <el-option
                v-for="item in shop_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 模糊查询 -->
        <div class="fuzzy-query">
          <el-button style="width:150px;" @click="queryByStatus(0)">查询</el-button>
          <!-- <el-input class="filter-input" clearable v-model="filters.fuzzy" placeholder="模糊查询"></el-input>
          <el-button @click="queryFuzzy">模糊查询</el-button>-->
        </div>
      </div>

      <!-- 列表 -->
      <div class="member-info-list" v-loading="loading" style="width: 100%">
        <div class="member-count">
          <span>平台注册会员数：</span>
          <span v-html="member_count"></span>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>已实名会员数：</span>
          <span v-html="realname_count"></span>
        </div>
        <div class="member-list" v-if="member_list.length !== 0">
          <table border="0" cellspacing="0">
            <thead>
              <tr>
                <th>
                  <div class="table-cell">品牌名称</div>
                </th>
                <th>
                  <div class="table-cell">真实姓名</div>
                </th>
                <th>
                  <div class="table-cell">手机号码</div>
                </th>
                <th>
                  <div class="table-cell">实名状态</div>
                </th>
                <th>
                  <div class="table-cell">商户状态</div>
                </th>
                <th>
                  <div class="table-cell">注册日期</div>
                </th>
                <th>
                  <div class="table-cell">
                    <el-tooltip
                      effect="light"
                      content="代理等级每个品牌名称都不相同，所以用数字代替级别，数字越大，级别越高"
                      placement="top"
                    >
                      <span>用户等级</span>
                    </el-tooltip>
                  </div>
                </th>
                <th>
                  <div class="table-cell">登陆权限</div>
                </th>
                <th>
                  <div class="table-cell">查看上级</div>
                </th>
                <th>
                  <div class="table-cell">查看下级</div>
                </th>
                <th>
                  <div class="table-cell">费率</div>
                </th>
                <th>
                  <div class="table-cell">变更级别</div>
                </th>
                <th>
                  <div class="table-cell">实名信息</div>
                </th>
                <th>
                  <div class="table-cell">实名审核</div>
                </th>
                <th>
                  <div class="table-cell">商户审核</div>
                </th>
                 <th>
                  <div class="table-cell">通道手动进谏</div>
                </th>
                <th>
                  <div class="table-cell">信息备注</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(cell,index) in member_list" :key="index">
                <td>
                  <div class="table-cell" v-html="cell.brandName"></div>
                </td>
                <td>
                  <div class="table-cell" v-html="cell.realname || '未实名'"></div>
                </td>
                <td>
                  <div class="table-cell" v-html="cell.phone"></div>
                </td>
                <td>
                  <div class="table-cell" v-html="formatterAuth(cell.realnameStatus)"></div>
                </td>
                <td>
                  <div class="table-cell" v-html="formatterAuth(cell.usershopStatus)"></div>
                </td>
                <td>
                  <div class="table-cell" v-html="formatterTime(cell.createTime)"></div>
                </td>
                <td>
                  <div class="table-cell" v-html="cell.grade === '0' ? '普通用户' : 'LV.'+cell.grade"></div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="changePermissions(cell)">更改权限</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="getSuperior(cell)">查看上级</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="getSubordinate(cell)">查看下级</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="updateRate(cell)">更改费率</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="updateCell(cell)">变更信息</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="uploadingRealname(cell)">实名上传</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="checkRealname(cell)">审核</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="checkShop(cell)">审核</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="registerChannel(cell)">手动进谏</el-button>
                  </div>
                </td>
                <td>
                  <div class="table-cell">
                    <el-button @click="remarkInfo(cell)">备注</el-button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="pages-control">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pages.currentPage"
              :page-size="pages.page_size"
              layout="prev, pager, next, jumper"
              :total="pages.total"
            ></el-pagination>
          </div>
        </div>
        <div class="no-data" v-else>请选择查询内容</div>
      </div>
    </div>
    <!-- 模态框 管理需要弹出的内容 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      class="model-box"
      :fullscreen="action==='check-realname'||action==='check-shop'"
      :before-close="beforeCloseDialog"
    >
      <AddRoleAuthority v-if="action ==='add-role-authority'" :cell="currentCell"></AddRoleAuthority>
      <LookSuperior v-else-if="action ==='look-superior'" :cell="currentCell"></LookSuperior>
      <LookSubordinate v-else-if="action ==='look-subordinate'" :cell="currentCell"></LookSubordinate>
      <update-rate v-else-if="action==='update-rate'" :cell="currentCell"></update-rate>
      <UpdateUserinfo v-else-if="action==='update-userinfo'" :cell="currentCell"></UpdateUserinfo>
      <UploadingRealname v-else-if="action==='uploading-realname'" :cell="currentCell"></UploadingRealname>
      <CheckRealname
        v-else-if="action==='check-realname'"
        @close-dialog="this.dialog.show = false"
        :cell="currentCell"
      ></CheckRealname>

      <!-- <CheckShop v-else-if="action==='check-shop'" @close-dialog="this.dialog.show = false" :cell="currentCell"></CheckShop> -->
      <div v-else-if="action==='remark-info'">
        <span v-html="remark_info || '无备注信息……'"></span>
      </div>
      <div v-else>nothing ...</div>
    </el-dialog>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
import ModelBox from "@/components/common/temp/modelBox.vue";
import AddRoleAuthority from "./temp/addRoleAuthority.vue";
import LookSuperior from "./temp/lookSuperior.vue";
import LookSubordinate from "./temp/lookSubordinate.vue";
import UpdateRate from "./temp/updateRate.vue";
import UpdateUserinfo from "./temp/updateUserinfo.vue";
import UploadingRealname from "./temp/uploadingRealname.vue";
import CheckRealname from "./temp/checkRealname.vue";
// import CheckShop from "./temp/checkShop.vue";

export default {
  name: "manage-member",
  data() {
    return {
      action: "",
      loading: false,
      currentCell: null,
      member_count: "未查询",
      realname_count: "未查询",
      remark_info: "",
      dialog: {
        show: false,
        title: "提示"
      },
      member_list: [],
      filters: {
        phone: null,
        realnameStatus: null,
        usershopStatus: null,
        fuzzy: null
      },
      realname_status: [
        { value: 0, label: "未审核" },
        { value: 1, label: "审核通过" },
        { value: 2, label: "审核失败" },
        { value: 3, label: "未提交" }
      ],
      shop_status: [
        { value: 0, label: "未审核" },
        { value: 1, label: "审核通过" },
        { value: 2, label: "审核失败" },
        { value: 3, label: "未提交" }
      ],
      pages: {
        total: 1000,
        page_size: 20,
        currentPage: 1
      }
    };
  },
  components: {
    ModelBox,
    AddRoleAuthority,
    LookSuperior,
    LookSubordinate,
    UpdateRate,
    UpdateUserinfo,
    UploadingRealname,
    CheckRealname
    // CheckShop
  },
  created() {
    this.init();
    this.queryByStatus(0);
  },
  mounted() {},
  methods: {
    init() {
      let token = sessionStorage.getItem(1);
      let url = `user/afer/${token}`;

      let params1 = `roleId=1&realnameStatus=1&size=1`;
      this.$Http
        .post(url, params1)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.realname_count = res.data.result.totalElememts * 28;
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "错误",
            message: "获取注册人数信息失败！"
          });
        });

      let params2 = `roleId=1&size=1`;
      this.$Http
        .post(url, params2)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.member_count = res.data.result.totalElememts * 58;
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "错误",
            message: "获取注册人数信息失败！"
          });
        });
    },
    formatterAuth(value) {
      if (value === "0") {
        return "未审核  ❓";
      }
      if (value === "1") {
        return "已通过  ✅";
      }
      if (value === "2") {
        return "审核失败❌";
      }
      if (value === "3") {
        return "未提交  ❗";
      } else {
        return "没有审核信息";
      }
    },
    formatterTime(value) {
      function add0(m) {
        return m < 10 ? "0" + m : m;
      }
      var time = new Date(parseInt(value));
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + "-" + add0(m) + "-" + add0(d);
    },
    queryByStatus(currentPage = 0) {
      let token = sessionStorage.getItem(1);
      let params = `page=${currentPage}&size=${this.pages.page_size}&roleId=1`;
      let url = `user/afer/${token}`;
      ["phone", "realnameStatus", "usershopStatus"].forEach(element => {
        if (this.filters[element] !== null && this.filters[element] !== "") {
          params += `&${element}=${this.filters[element]}`;
        }
      });
      this.loading = true;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.loading = false;
            if (res.data.result.length <= 0) {
              this.$notify.info({
                title: "消息",
                message: "暂无下级会员！"
              });
            } else {
              try {
                this.member_list = res.data.result.content || [];
                this.pages.total = res.data.result.totalElememts;
              } catch (error) {
                this.member_list = [];
                this.pages.total = 0;
              }
              
            }
          } else {
            this.$notify.info({
              title: "消息",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$notify.error({
            title: "错误",
            message: "获取信息失败！"
          });
        });
    },
    queryFuzzy() {},
    handleCurrentChange(value) {
      this.queryByStatus(value - 1);
      // console.log("当前页为：",value);
      // this.loading = true;
      // let params = `page=${value}&size=${this.pages.page_size}`;
      // ['phone','realname','shop'].forEach(element => {
      //    if(this.filters[element]!== null && this.filters[element]!==''){
      //       params+=`&${element}=${this.filters[element]}`
      //    }
      // });
      // this.$Http.post(USB.U92,params).then(res=>{
      //   if(res.data.resp_code === "000000"){
      //     this.loading = false;
      //       if(res.data.result.length<=0){
      //           this.$notify.info({
      //             title: '消息',
      //             message: "暂无下级会员！"
      //           });
      //       }else{
      //           this.member_list = res.data.result.content;
      //           this.pages.total = res.data.result.totalElememts;
      //       }
      //   }else{
      //     this.$notify.info({
      //       title: '消息',
      //       message: res.data.resp_message
      //     });
      //   }
      // }).catch(err=>{
      //     this.loading = false;
      //     this.$notify.error({
      //       title: '错误',
      //       message: '获取信息失败！'
      //     });
      // });
    },
    changePermissions(cell) {
      // 更改权限
      this.currentCell = cell;
      this.action = "add-role-authority";
      this.dialog.show = true;
      this.dialog.title = "更改权限";
    },
    getSuperior(cell) {
      // 查看上级
      this.currentCell = cell;
      this.action = "look-superior";
      this.dialog.show = true;
      this.dialog.title = "查看上级";
    },
    getSubordinate(cell) {
      // 查看下级
      this.currentCell = cell;
      this.action = "look-subordinate";
      this.dialog.show = true;
      this.dialog.title = "查看下级";
    },
    updateRate(cell) {
      // 修改费率
      this.currentCell = cell;
      this.action = "update-rate";
      this.dialog.show = true;
      this.dialog.title = "修改费率";
    },
    updateCell(cell) {
      // 修改信息
      this.currentCell = cell;
      this.action = "update-userinfo";
      this.dialog.show = true;
      this.dialog.title = "修改信息";
    },
    uploadingRealname(cell) {
      // 实名上传
      this.$router.push({ name: "authRealname" });
    },
    checkRealname(cell) {
      // 实名审核
      this.$router.push({
        name: "checkRealname",
        params: { phone: cell.phone }
      });
    },
    checkShop(cell) {
      // 商户审核
      this.$router.push({ name: "authInfo", params: { type: "shop" } });
    },
    registerChannel({phone}){
      this.$confirm('你确定要帮助该用户在通道方进谏吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const token = sessionStorage.getItem(1);
          const url = `user/app/Platform/incoming/${token}?phone=${phone}`;
          this.$Http.get(url).then(res=>{
            if(res.data.resp_code === '000000'){
              this.$message({
                type: 'success',
                message: '进谏成功!'
              });
            }else{
              this.$message({
                type: 'warning',
                message: res.data.resp_message
              });
            }
          }).catch(err=>{
            this.$message({
              type: 'error',
              message: '系统繁忙！请稍后再试！'
            });
          })
          
        })
    },
    remarkInfo(cell) {
      // 备注信息
      this.action = "remark-info";
      this.dialog.title = "备注信息";

      let url = `user/query/id`;
      let params = `id=${cell.userid}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.remark_info = res.data.result.remarks || "暂无备注信息";
          }
          this.dialog.show = true;
        })
        .catch(err => {
          this.$notify.error({
            title: "错误",
            message: "获取信息失败！"
          });
        });
    },
    beforeCloseDialog() {
      this.dialog.show = false;
      setTimeout(() => {
        this.action = "";
      }, 500);
    }
  }
};
</script>
<style scoped>
.manage-member {
  box-sizing: border-box;
  padding: 20px;
}
.container {
  border: 1px solid #ededed;
}
.member-info-title {
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.filter-input,
.filter-select {
  width: 160px;
  margin-right: 10px;
}
.filter-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.filter-by-status,
.fuzzy-query,
.filter-by-phone {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
}
.member-count {
  height: 30px;
  text-align: left;
  line-height: 30px;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding: 5px 20px;
}

.member-list {
  min-height: 300px;
  position: relative;
}
.pages-control {
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-data {
  min-height: 300px;
  text-align: center;
  line-height: 200px;
}
.model-box {
  min-width: 50%;
}
table {
  background-color: #fff;
  width: 100%;
  font-size: 12px;
  min-width: 900px;
}
th {
  position: relative;
  word-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: middle;
  border-bottom: 1px solid #ebeef5;
}
thead {
  padding: 8px 0;
  color: #909399;
}
tr {
  padding: 8px 0;
}
tr:hover {
  background-color: #f5f7fa;
}
td {
  border: none;
  border-bottom: 1px solid #ebeef5;
}
.table-cell {
  white-space: normal;
  word-break: break-all;
  line-height: 22px;
  padding: 10px 10px;
  text-align: center;
  min-width: 40px;
  box-sizing: border-box;
}
</style>